<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健身房预约系统</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <script src="../static/js/bootstrap.min.js"></script>
    <style>
        html{
          height: 100%;
        }
        ul li {
            list-style: none;
        }
        .container {
            max-width: 1920px;
        }
        .custom-font-size-large {
            font-size: 14px;
            line-height: 1.0;
            margin-top: 3px;
            margin-bottom: 3px;
        }
        .custom-font-size-mid {
            font-size: 12px;
            line-height: 1.0;
            margin-top: 3px;
            margin-bottom: 3px;
        }
        .custom-font-size-small {
            font-size: 9px;
            line-height: 1.0;
            margin-top: 3px;
            margin-bottom: 3px;
        }
        table td,
        table th {
            padding: 0;
        }
        .btn-outline-success {
            width: 80px;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="">健身房预约系统</a>
            <div>
                <button type="button"  class="btn btn-link">
                    <a href="{{ url_for('logout') }}">退出登录</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </button>
            </div>
            
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="{{ url_for('index') }}">系统主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{{ url_for('index') }}">预约中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('mine') }}">个人中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('search') }}">搜索课程</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            帮助
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="{{ url_for('regulation') }}">规章制度</a></li>
                    </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container"  style="padding: 10px; width: 100%; margin-left:10px;margin-right:20px;">
        <div class="row" style="width: 100%;">
            <div class="col-4" >
                <div class="card card-flex">
                    <div class="card-header">
                        已预约课程
                    </div>
                    <table class="table custom-font-size-mid">
                        <thead>
                            <tr>
                                <th>课程名称</th>
                                <th>地点</th>
                                <th>座位号</th>
                                <th>日期</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for mi_app in mine_appointment %}
                            <tr>
                                <td style="vertical-align: middle;">{{ mi_app[1] }}</td>
                                <td style="vertical-align: middle;">{{ mi_app[2] }}</td>
                                <td style="vertical-align: middle;">{{ mi_app[3] }}</td>
                                <td style="vertical-align: middle;">{{ mi_app[4] }}</td>
                                <td style="vertical-align: middle;">
                                    <button id="btn-{{ mi_app[0] }}" type="button" class="btn btn-success custom-font-size-mid" onclick="updateButtonStatus({{ mi_app[0] }}, {{mi_app[5]}})" style="vertical-align: middle;">{% if mi_app[5] == 0 %}待签到{% elif mi_app[5] == 1 %}已签到{% endif %}</button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-8">
                <div class="card card-flex">
                    <div class="card-header">
                        预约课程
                    </div>
                    <table class="table custom-font-size-mid">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">课程名称</th>
                                <th scope="col">课程时间</th>
                                <th scope="col">课程教练</th>
                                <th scope="col">健身房名称</th>
                                <th scope="col">剩余量</th>
                                <th scope="col">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for  appointment in appoint_detail %}
                            <tr>
                                <th scope="row">{{ appointment[0] }}</th>
                                <td style="vertical-align: middle;">{{ appointment[1] }}</td>
                                <td style="vertical-align: middle;"{{ appointment[3] }}</td>
                                <td style="vertical-align: middle;">{{ appointment[4] }}</td>
                                <td style="vertical-align: middle;">{{ appointment[2] }}</td>
                                <td style="vertical-align: middle;">{{ appointment[5] }}</td>
                                <td>
                                    <form action="/search_appoint" method="POST">
                                        <select name="laboratory_id" style="display: none">
                                            <option selected="selected">{{ appointment[0] }}</option>
                                        </select>
                                        {% if appointment[6] == 0 %}
                                            <button id="btn—order-{{ appointment[0] }}" type="button"  onclick="updateOrderButtonStatus({{ appointment[0] }})" class="btn btn-outline-success custom-font-size-mid">预约</button>
                                        {% elif appointment[6] == 1 %}
                                            <button id="btn—order-{{ appointment[0] }}" type="button"  onclick="updateOrderButtonStatus({{ appointment[0] }})" class="btn btn-outline-success custom-font-size-mid">取消预约</button>
                                        {% elif appointment[6] == 2 %}
                                            <button id="btn—order-{{ appointment[0] }}" type="button"  onclick="updateOrderButtonStatus({{ appointment[0] }})" class="btn btn-outline-success custom-font-size-mid" disabled="disabled">已签到</button>
                                        {% endif %}
                                    </form>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                
            </div>
        </div>
    </div>
    <script>
        function updateButtonStatus(appointmentId, origin_status) {
            var button = document.getElementById("btn-" + appointmentId);
            var xhr = new XMLHttpRequest();
            if (origin_status == 0) {
                button.disabled = false;
            } else {
                button.disabled = true;
            }
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.status == 0) {
                        button.innerHTML = "待签到";
                        button.disabled = false;
                    } else if (response.status == 1) {
                        button.innerHTML = "已签到";
                        button.disabled = true;
                    }
                }
            };
            xhr.open("POST", "/get_status", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send("appointment_id=" + appointmentId);
        }

        function updateOrderButtonStatus(appointmentId) {
            var button = document.getElementById("btn—order-" + appointmentId);
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.status == 0) {
                        button.innerHTML = "预约";
                    } else if (response.status == 1) {
                        button.innerHTML = "取消预约";
                    }
                    window.location.href = "/order";
                }
            };
            xhr.open("POST", "/get_status_order", true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send("appointment_id=" + appointmentId);
        }
    </script>
</body>
</html>